<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>考试中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f2f6fc;
        }

        #myExam {
            max-width: 980px;
            margin: 20px auto;
            padding: 0 15px;
        }

        .title {
            text-align: center;
            margin: 20px 0;
            font-size: 28px;
            color: #1e9fff;
            padding: 10px 0;
            border-bottom: 1px solid #eaeaea;
        }

        .wrapper {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            padding: 20px;
        }

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
            margin-bottom: 25px;
        }

        .order {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }

        .search-box {
            display: flex;
            flex: 1;
            max-width: 500px;
            margin: 0 20px;
        }

        .search-box input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #dcdfe6;
            border-radius: 4px 0 0 4px;
            transition: all 0.3s;
        }

        .search-box input:focus {
            border-color: #1e9fff;
            box-shadow: 0 0 0 2px rgba(30, 159, 255, 0.2);
        }

        .search-box button {
            border-radius: 0 4px 4px 0;
        }

        .paper {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .item {
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            padding: 25px;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            background: linear-gradient(to bottom, #ffffff, #fafafa);
        }

        .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(30, 159, 255, 0.15);
            border-color: #c2e0ff;
        }

        .item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #1e9fff, #0d8ae0);
        }

        .item h4 {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            cursor: pointer;
            transition: color 0.3s;
            padding-right: 20px;
        }

        .item h4:hover {
            color: #1e9fff;
        }

        .item h4::after {
            content: '→';
            position: absolute;
            top: 25px;
            right: 20px;
            color: #1e9fff;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .item:hover h4::after {
            opacity: 1;
        }

        .name {
            color: #666;
            font-size: 15px;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .info {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            color: #555;
            font-size: 14px;
        }

        .info span {
            display: flex;
            align-items: center;
        }

        .info i {
            margin-right: 6px;
            color: #1e9fff;
            font-size: 16px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            padding: 20px 0 30px 0;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .loading-text {
            margin-left: 15px;
            font-size: 18px;
            color: #1e9fff;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .top {
                flex-direction: column;
                align-items: flex-start;
            }

            .search-box {
                width: 100%;
                max-width: none;
                margin: 15px 0;
            }

            .paper {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<div id="myExam">
    <div class="title">考试中心</div>

    <div class="wrapper">
        <div class="top">
            <div class="order">试卷列表</div>
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="试卷名称" class="search">
                <button class="layui-btn layui-btn-normal" id="searchBtn">
                    <i class="fa fa-search"></i>
                </button>
            </div>
            <button class="layui-btn layui-btn-primary" id="refreshBtn">
                <i class="fa fa-refresh"></i> 刷新
            </button>
        </div>

        <div class="paper" id="paperList">
            <!-- 试卷列表将通过JS动态生成 -->
            <div class="loading-overlay">
                <i class="fa fa-spinner fa-spin fa-3x" style="color:#1e9fff"></i>
                <span class="loading-text">试卷加载中...</span>
            </div>
        </div>

        <div class="pagination" id="pagination"></div>
    </div>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    // 全局变量 - 保持与Vue组件相同的状态
    let pagination = {
        current: 1,
        total: 0,
        size: 6
    };

    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
        // 获取试卷信息
        getExamInfo();

        // 绑定搜索按钮事件
        document.getElementById('searchBtn').addEventListener('click', search);

        // 绑定刷新按钮事件
        document.getElementById('refreshBtn').addEventListener('click', function() {
            document.getElementById('searchInput').value = '';
            getExamInfo();
        });

        // 监听回车键搜索
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                search();
            }
        });
    });

    // 获取试卷信息
    function getExamInfo() {
        showLoading(true);

        const url = `/api/exams/${pagination.current}/${pagination.size}`;

        fetch(url)
            .then(response => response.json())
            .then(res => {
                if (res.code === 200) {
                    pagination = res.data;
                    renderPaperList();
                    renderPagination();
                } else {
                    layui.layer.msg('获取试卷失败: ' + (res.message || '未知错误'), {icon: 2});
                }
                showLoading(false);
            })
            .catch(error => {
                console.error('获取试卷失败:', error);
                layui.layer.msg('请求失败，请稍后重试', {icon: 2});
                showLoading(false);
            });
    }

    // 渲染试卷列表
    function renderPaperList() {
        const container = document.getElementById('paperList');

        if (pagination.records && pagination.records.length > 0) {
            let html = '';

            pagination.records.forEach(item => {
                html += `
            <div class="item">
                <h4 onclick="toExamMsg('${item.examCode}')">${item.source}</h4>
                <p class="name">${item.source}-${item.description}</p>
                <div class="info">
                    <span><i class="fa fa-calendar"></i> ${item.examDate.substr(0,10)}</span>
                    ${item.totalTime ? `<span><i class="fa fa-clock-o"></i> 限时${item.totalTime}分钟</span>` : ''}
                    <span><i class="fa fa-star"></i> 满分${item.totalScore}分</span>
                </div>
            </div>
            `;
            });

            container.innerHTML = html;
        } else {
            container.innerHTML = `
            <div class="layui-card" style="grid-column:1/-1;text-align:center;padding:50px 0;">
                <div class="layui-card-body">
                    <i class="fa fa-file-text-o" style="font-size:60px;color:#e6e6e6;"></i>
                    <div style="margin-top:15px;font-size:18px;color:#999;">暂无试卷数据</div>
                </div>
            </div>
        `;
        }
    }

    // 渲染分页
    function renderPagination() {
        layui.use('laypage', function(){
            var laypage = layui.laypage;

            laypage.render({
                elem: 'pagination',
                count: pagination.total,
                limit: pagination.size,
                curr: pagination.current,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                limits: [6, 10, 20, 40],
                jump: function(obj, first) {
                    if (!first) {
                        pagination.current = obj.curr;
                        pagination.size = obj.limit;
                        getExamInfo();
                    }
                }
            });
        });
    }

    // 搜索试卷
    function search() {
        const key = document.getElementById('searchInput').value;

        if (!key) {
            getExamInfo();
            return;
        }

        showLoading(true);

        fetch('/api/exams')
            .then(response => response.json())
            .then(res => {
                if (res.code === 200) {
                    const allExam = res.data;
                    const filteredExams = allExam.filter(item => {
                        return item.source.includes(key);
                    });

                    // 更新分页数据
                    pagination.records = filteredExams;
                    pagination.total = filteredExams.length;
                    pagination.current = 1;

                    // 渲染列表
                    renderPaperList();
                    renderPagination();
                } else {
                    layui.layer.msg('搜索失败: ' + (res.message || '未知错误'), {icon: 2});
                }
                showLoading(false);
            })
            .catch(error => {
                console.error('搜索失败:', error);
                layui.layer.msg('请求失败，请稍后重试', {icon: 2});
                showLoading(false);
            });
    }

    // 跳转到试卷详情页
    function toExamMsg(examCode) {
        // 实际项目中根据路由配置跳转
        // 这里使用模拟方式，实际应替换为您的路由逻辑
        console.log('跳转到试卷详情:', examCode);
        layui.layer.msg(`准备进入试卷: ${examCode}`, {icon: 1});

        // 示例：window.location.href = `examMsg.html?examCode=${examCode}`;
    }

    // 显示/隐藏加载状态
    function showLoading(show) {
        const overlay = document.querySelector('.loading-overlay');
        if (overlay) {
            overlay.style.display = show ? 'flex' : 'none';
        }
    }
</script>
</body>
</html>